<template>
  <div>
    <van-tabs v-model="active"
    @click="getActive"
    
    >
      <van-tab title="标签 1">内容 1</van-tab>
      <van-tab title="标签 2">内容 2</van-tab>
      <van-tab title="标签 3">内容 3</van-tab>
      <van-tab title="标签 4">内容 4</van-tab>
      <van-tab title="标签 5">内容 5</van-tab>
      <van-tab title="标签 6">内容 6</van-tab>
      <van-tab title="标签 7">内容 7</van-tab>
      <van-tab title="标签 8">内容 8</van-tab>
      <van-tab title="标签 9">内容 9</van-tab>
     
    </van-tabs>
    <swiper class="swiper" :options="swiperOption" ref="swiperWrap">
      <swiper-slide v-for="(item, index) in 9" :key="index" :class="`bv${index}`">
          内容{{ index + 1}}
      </swiper-slide>

      <!-- <div class="swiper-pagination" slot="pagination"></div> -->
    </swiper>
  </div>
</template>

<script>
import { test } from "@/request/api.js";
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
export default {
  data() {
    return {
      active:0,
      list: [],
       swiperOption: {
        speed: 300,
        
        // slidesPerView: 1.3,
        // spaceBetween: 0,

        // centeredSlides: true,
        // loop: true,
        // autoplay: {
        //   delay: 1000,
        //   disableOnInteraction: false,
        // },
        // pagination: {
        //   el: ".swiper-pagination",
        //   clickable: true,
        // },
        // navigation: {
        //   nextEl: ".swiper-button-next",
        //   prevEl: ".swiper-button-prev",
        // },
        // 事件
        on: {
          slideChangeTransitionEnd: () => {
            this.active = this.swiper.activeIndex
          },
        },
      },
    };
  },
  components: {
    swiper,
    swiperSlide,
  },
  computed: {
    swiper() {
      return this.$refs.swiperWrap.swiper;
    },
  },
  props: {},
  created() {
    
  },
  methods: {
    getActive(name,title){
      console.log("name ==>",name,"active ==>",this.active)
      this.swiper.activeIndex = this.active
      console.log(this.swiper.activeIndex)
    }
  },
  mounted(){
    console.log(this.active)
  }
};
</script>

<style lang="scss" scoped>

.bv{
  height: 300px;
  
}
.bv0{background-color: pink;   height: 300px;}
.bv1{background-color: red;    height: 300px;}
.bv2{background-color: yellow; height: 300px;   }
.bv3{background-color: blue;   height: 300px; }
.bv4{background-color: purple; height: 300px;  }
.bv5{background-color: burlywood;   height: 300px;}
.bv6{background-color: black;    height: 300px;}
.bv7{background-color:#ccc; height: 300px;   }
.bv8{background-color: #f50;   height: 300px; }



</style>



